{% extends "pages/auth/_layout.html" %}
{% from "components/macros.html" import submit_button %}
{% from "components/auth_macros.html" import auth_field, auth_banner %}

{% block title %}Reset your password - {{ project_name }}{% endblock %}

{% block auth_form %}
<div x-data="forgotForm()">
  <h1 class="text-2xl font-semibold text-white mb-2">Reset your password</h1>
  <p class="text-sm text-aegis-muted mb-8">
    Enter your email and we'll send a reset link.
  </p>

  {# Posts through fetch rather than a native submit: there is no password
     here, so there is no save-password prompt to preserve, and staying on
     the page lets the same view show the confirmation. #}
  <form class="space-y-4" @submit.prevent="submit()">
    {{ auth_banner("sent", tone="ok") }}
    {{ auth_banner("error") }}

    {{ auth_field("email", "Email", type="email", autocomplete="username", placeholder="you@domain.com") }}

    {{ submit_button("Send reset link", "Sending…") }}
  </form>
</div>

<script>
function forgotForm() {
  return {
    loading: false,
    error: '',
    sent: '',

    async submit() {
      if (this.loading) return;
      this.loading = true;
      this.error = '';
      this.sent = '';
      const email = this.$el.querySelector('input[name=email]').value;
      try {
        await fetch('/api/v1/auth/password-reset/request', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ email: email }),
        });
      } catch (_) {
        this.loading = false;
        this.error = 'Could not reach the server. Try again.';
        return;
      }
      this.loading = false;
      // Always the same answer, whether or not the address exists: telling
      // the difference would turn this form into an account-enumeration
      // oracle. The API is deliberately silent about it too.
      this.sent = 'If that email has an account, a reset link is on its way.';
    },
  };
}
</script>
{% endblock %}

{% block auth_footer %}
Remembered it? <a href="/login" class="text-aegis-teal hover:text-white transition-colors">Sign in</a>.
{% endblock %}